<template>
  <a-modal
    width="1015px"
    :visible="CAVisible"
    cancelText="关闭"
    @cancel="CAVisiblehandleCancel"
    :dialogStyle="{ top: '30vh',minHeight:'20vh' }"
  >
    <a-row v-if="editShow != 'edit'">
      <a-col :span="9">
        <a-row>
          <a-col :span="3" style="line-height: 30px"> 卡号： </a-col>
          <a-col :span="21">
            <a-input-search
              v-model="CASearchValue"
              placeholder="请输入要预约的顾客卡号"
              allowClear
              style="width: 300px"
              :class="CANoCardShow && 'no-user-input-style'"
              enter-button
              @search="CAonSearch"
              :loading="searchLoading"
              @click="inputClick"
            />
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <div v-if="CABoxShow">
      <div class="CA-box">
        <!-- <a-row>
          <a-col :span="4"> 顾客姓名：{{ searchUserinfo.name }} </a-col>
          <a-col :span="5"> 顾客卡号：{{ searchUserinfo.cardNo }} </a-col>

          <a-col :span="4"> 顾客年龄：{{ searchUserinfo.age }} 岁 </a-col>
          <a-col :span="4"> 顾客性别：{{ searchUserinfo.sex === 0 ? '男' : '女' }} </a-col>
          <a-col :span="4"> 所属客管：{{ searchUserinfo.developerName }} </a-col>
        </a-row>
        <a-row class="CA-box">
          <a-col :span="24"> 顾客手机号：{{ searchUserinfo.tel }} </a-col>
           
        </a-row> -->
        <a-row class="CA-box">
          <a-col :span="6"> 顾客姓名：{{ searchUserinfo.name }} </a-col>
          <a-col :span="6"> 顾客卡号：{{ searchUserinfo.cardNo }} </a-col>

          <a-col :span="6"> 顾客年龄：{{ searchUserinfo.age?searchUserinfo.age + '岁':'未知' }}  </a-col>
          <a-col :span="6"> 顾客性别：{{ searchUserinfo.sex === 0 ? '男' : '女' }} </a-col>
   
        </a-row>
        <a-row class="CA-box"> 
          <a-col :span="6"> 所属客管：{{ searchUserinfo.consultManName?searchUserinfo.consultManName:'暂无' }} </a-col> 
          <a-col :md="18" style="display:flex"> <span style="width：70px;display:bloc">联系方式：</span><span style="width:calc(100% - 70px);display:block">{{ searchUserinfo.tel }}</span></a-col>
        </a-row>
        
      </div>
      <a-form :form="formData" layout="inline" :selfUpdate="true">
        <a-row>
          <a-col :md="8" v-if="detailShow != 'detail'">
            <a-form-item label="顾客到院日期" >
              <a-date-picker 
                style="width: 100%"
                :mode="timeType" 
                format="YYYY-MM-DD" 
                :disabledDate="disabledDate"
                @openChange="handleOpenChange"
                @panelChange="handlePanelChange"
                v-decorator="['appointmentTime', { rules: [{ required: true, message: '请选择顾客到院日期' }] }]"
              />
            </a-form-item> 
          </a-col>
          
          <!-- <a-col :span="8">
              <a-row>
                <a-col :span="9" style="line-height:30px"><b style="color:red;margin-right:5px">*</b>顾客到院日期：</a-col>
                <a-col :span="15">
                  <a-date-picker
                    :mode="timeType"
                    show-time
                    @openChange="handleOpenChange"
                    @panelChange="handlePanelChange"
                  />
                </a-col>
              </a-row> 
            </a-col> -->
          <a-col :md="4" v-if="detailShow != 'detail'"></a-col>
          <a-col :md="9" v-if="detailShow != 'detail'">
            <a-form-item label="意向专家">
              <a-cascader
                :show-search="{ filter }"
                style="width: 100%"
                :field-names="{ label: 'name', value: 'id', children: 'deptList' }"
                :options="selectDeptDataAll"
                placeholder="请先选择意向专家"
                @change="prospectiveExpertChange"
                v-decorator="['deptName', { rules: [{ required: true, message: '请先选择意向专家' }] }]"
              />
            </a-form-item>
            <!-- <a-row>
                <a-col :span="6" style="line-height:30px"><b style="color:red;margin-right:5px">*</b>意向专家：</a-col>
                <a-col :span="18">
                  <a-cascader
                    style="width:100%"
                    :field-names="{ label: 'name', value: 'id', children: 'deptList' }"
                    :options="selectDeptDataAll"
                    placeholder="请先选择意向专家"
                    @change="prospectiveExpertChange"
                  />
                </a-col>
              </a-row>  -->
          </a-col>
          <a-col :md="6" v-if="detailShow == 'detail'"> 顾客到院日期：{{ detailData.scheduleDate }} </a-col>
          <a-col :md="6" v-if="detailShow == 'detail'"> 意向专家：{{ `${getDepName(detailData.createdUserDeptId)}-${detailData.expertName?detailData.expertName:''}` }} </a-col>

          <a-col :md="6" v-if="detailShow == 'detail'"> 咨询项目：{{ detailData.text }} </a-col>
          <a-col :md="6" v-if="detailShow == 'detail'"> 备注：{{ detailData.memo?detailData.memo:'暂无' }} </a-col>
        </a-row>
        <!-- 备注信息 -->
        <a-row style="margin-top: 20px"  > 
          <a-col :md="12" v-if="detailShow != 'detail'">
            <a-form-item label="咨询项目" class="text-area-style">
              <a-textarea
                placeholder="请填写需要到院咨询的项目"
                :auto-size="{ minRows: 2, maxRows: 5 }"
                v-decorator="['projectName', { rules: [{ required: true, message: '请填写需要到院咨询的项目' }] }]"
              />
            </a-form-item>
            <!-- <a-row>
                <a-col :span="3" style="line-height:30px"><b style="color:red;margin-right:5px">*</b>项目：</a-col>
                <a-col :span="18">
                  <a-textarea
                    placeholder="请填写需要到院咨询的项目" :auto-size="{ minRows: 2, maxRows: 5 }"
                  />
                </a-col>
              </a-row>   -->
          </a-col>
          
          <a-col :md="11" v-if="detailShow != 'detail'">
            <a-form-item label="备注" class="text-area-style">
              <a-textarea
                placeholder="请输入备注信息"
                :auto-size="{ minRows: 3, maxRows: 5 }"
                v-decorator="['remarks', { rules: [{ required: false, message: '请输入备注信息' }] }]"
              />
            </a-form-item>
            
            <!-- <a-row>
                <a-col :md="3" style="line-height:30px">备注：</a-col>
                <a-col :md="20">
                  <a-textarea
                    placeholder="请输入备注信息" :auto-size="{ minRows: 2, maxRows: 5 }"
                  />
                </a-col>
              </a-row>   -->
          </a-col>
          
        </a-row>
      </a-form>
    </div>

    <div v-if="CANoCardShow" :class="CANoCardShow && 'no-user-style'">暂无该用户，请重新输入卡号</div>

    <template slot="footer">
      <a-button @click="CAVisiblehandleCancel()">关闭</a-button>
      <a-button type="primary" @click="CASubmit()" :disabled="!CABoxShow"  v-if="detailShow != 'detail'">确认</a-button>
    </template>
  </a-modal>
</template>
<script>
import { 
    SelectCardNo,
    SelectDeptNameAll, 
    AddToTheHospital,
    SelectTbCcheduler,
    UpdateToTheHospital
} from '@/api/modular/main/bookingManagement/bookingManagement'
import moment from 'moment'
export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {
        }
      },
    },
  },
  data() {
    return {  
      // 预约到院
      CAVisible: false,
      CABoxShow: false,
      CANoCardShow: false,
      searchLoading: false,
      CASearchValue: '',
      timeType: 'date',
      selectDeptDataAll:[],
      searchUserinfo:{},
      formData: this.$form.createForm(this),
      editShow:'',
      detailShow:'',
      detailData: {}
    }
  },
  methods: {
    getDepName(id){
      if(id == 'DE0011'){
        return '整形中心'
      }else if(id == 'DE0012'){
        return '皮肤中心'
      }else if(id == 'DE0013'){
        return '无创中心'
      }else if(id == 'DE0014'){
        return '口腔中心'
      }
      return ''
    },
    // 搜索
    filter(inputValue, path) { 
      return path.some(option => option.name.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    },
    // 禁用
    disabledDate(current) {
       return current && current < moment().startOf('day');    //当天之前的不可选，不包括当天 
    },
    moment,
    CAVisiblehandleCancel() {
      this.CAVisible = false
      this.CASearchValue = ''
      this.searchLoading = false
      setTimeout(() => {
        this.CABoxShow = false
      }, 500)
    },
    show(type='', type2=""){
        this.editShow = type
        this.detailShow = type2
        if(this.editShow == 'edit'){
            this.CABoxShow = true
            
            console.log(this.row_record)
            // 修改的时候调用请求
            let sendData = {
                id: this.row_record.tbSchedulerId
            }
            SelectTbCcheduler(sendData).then(res => {
                if(res.code == 200){
                    let data = res.rows[0]
                    this.searchUserinfo = data
                    if(this.detailShow == 'detail'){
                      this.detailData = data
                    }else{
                      this.$nextTick(() => {
                        setTimeout(() => {
                          this.formData.setFieldsValue({
                            "appointmentTime": data.scheduleDate,
                            'deptName': [data.createdUserDeptId, data.expertId],
                            'projectName': data.text,
                            'remarks': data.memo
                          })
                        }, 500);
                      })
                    }
                    
                    
                }else{
                    this.$message.error(result.msg)
                }
            })
        }
        this.CAVisible = true
        // 医生下拉
        SelectDeptNameAll().then(result => {
            if(result.code == 200){
                let newData = result.rows.map(item => {
                    return {
                    name: item.deptName,
                    id: item.execDeptId,
                    deptList:  
                        item.deptList.map(elemt => {
                            return {
                                name: elemt.userName,
                                id: elemt.erpId
                            }
                        })
                    
                    }
                })
                this.selectDeptDataAll = newData 
            }else{
                this.$message.error(result.msg)
            }
        })
    },
    // 到院预约 -- 新增 点击日期选择器
    handleOpenChange(open) {
      console.log(open)
      if (open) {
        this.timeType = 'date';
      }
    },
    inputClick(){
      this.CANoCardShow = false
    },
    // 选择类型
    handlePanelChange(value, mode) {
      this.timeType = mode;
    },
    // 选择意向专家
    prospectiveExpertChange(value) {
      console.log(value);
    },
    // 点击确认
    CASubmit(){
      console.log('确认')
      const {
        formData: { validateFields },
      } = this
       validateFields((errors, values) => {
        if (errors) {
          console.log('表单检验未通过111', errors, values)
          return
        }
        const form_values = this.formData.getFieldsValue()
        
        console.log(form_values) 
        let sendData = {
            customerCrmId: this.searchUserinfo.tbCustomerId,
            clientName: this.searchUserinfo.name,
            deptId: form_values.deptName[0],
            expertId: form_values.deptName[1],
            text: form_values.projectName,
            scheduleDate: moment(form_values.appointmentTime).format('YYYY-MM-DD HH:mm:ss'),
            memo: form_values.remarks,
            zxName: this.searchUserinfo.developerName,
            id: this.searchUserinfo.id ? this.searchUserinfo.id : ''
        }
        console.log(sendData)
        if(this.editShow == 'edit'){
            UpdateToTheHospital(sendData).then(result => {
                if(result.code === 200){
                    this.$parent.$refs.table2.loadData()
                    this.$message.success(result.message)
                    this.CAVisiblehandleCancel()
                }else{
                    this.$message.error(result.message)
                } 
            })
        }else{
            AddToTheHospital(sendData).then(result => {
                if(result.code === 200){
                    this.$parent.$refs.table2.loadData()
                    this.$message.success(result.message)
                    this.CAVisiblehandleCancel()
                }else{
                    this.$message.error(result.message)
                } 
            })
        }
        
      })
    },

     
    // 点击查询
    CAonSearch(value){
      console.log(value.replace(/\s*/g,""))  
      if(this.CASearchValue == ''){
        this.$message.warning('请先输入需要检索的卡号')
        return false
      }
      
      this.searchLoading = true

      let sendData = {
        cardNo: this.CASearchValue.replace(/\s*/g,""),
        type: 2
      }
      SelectCardNo(sendData).then(res => {
        if(res.code === 200){
          this.searchLoading = false
           
          if(res.rows.length > 0){
            this.CABoxShow = true
            this.CANoCardShow = false
            this.searchUserinfo = res.rows[0]
          }else{
            this.CANoCardShow = true
            this.CASearchValue = ''
          }
          
        }else{
          this.$message.warning(res.msg) 
        }
      })

    },
  },
}
</script>
<style lang="less" scoped>
.CA-box{
  margin: 20px 0;
}
/deep/.CA-model-style .ant-modal-wrap{
  top: 20vh !important;
}
/deep/ .no-user-input-style{
  input{
    border-color: red !important;
  }
}
.no-user-style{
  text-align: left;
  color: red;
  position: absolute;
  top: 29px;
  margin: 0 auto;
  left: 8%;
  background-color: #fff;
  width: 235px;
  z-index: 10;
  pointer-events: none;
}
/deep/ .text-area-style{
  width: 100%;
  .ant-form-item-control-wrapper{
    width: 75% !important;
  }
}
// /deep/ .ant-modal-body{
//     min-height: 20vh !important;
// }
</style>